<div class="stock-flow-container">
  <h2 style="margin-bottom: 20px;">出入库流水</h2>
  <form class="search-form" (ngSubmit)="onSearch()" style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px;">
    <label>预计到达起始：<input type="date" [(ngModel)]="search.estimatedArrivalStart" name="estimatedArrivalStart"></label>
    <label>预计到达结束：<input type="date" [(ngModel)]="search.estimatedArrivalEnd" name="estimatedArrivalEnd"></label>
    <label>采购单号：<input type="text" [(ngModel)]="search.purchaseOrderNo" name="purchaseOrderNo" placeholder="请输入采购单号"></label>
    <label>状态：
      <select [(ngModel)]="search.status" name="status">
        <option value="">全部</option>
        <option value="初始状态">初始状态</option>
        <option value="已完成">已完成</option>
        <option value="计划中">计划中</option>
      </select>
    </label>
    <label>运输公司：
      <select [(ngModel)]="search.transportCompany" name="transportCompany">
        <option value="">全部</option>
        <option value="比亚迪">比亚迪</option>
        <option value="宁德时代">宁德时代</option>
        <option value="京东">京东</option>
        <option value="永辉">永辉</option>
        <option value="京东物流">京东物流</option>
        <option value="腾讯">腾讯</option>
        <option value="顺丰控股">顺丰控股</option>
        <option value="美团">美团</option>
        <option value="中国邮政">中国邮政</option>
        <option value="跨越速运">跨越速运</option>
      </select>
    </label>
    <label>供应商：<input type="text" [(ngModel)]="search.supplier" name="supplier" placeholder="请输入供应商"></label>
    <label>订单类型：
      <select [(ngModel)]="search.orderType" name="orderType">
        <option value="">全部</option>
        <option value="1">类型1</option>
        <option value="2">类型2</option>
        <option value="3">类型3</option>
      </select>
    </label>
    <button class="btn btn-primary" type="submit">查找</button>
    <button class="btn btn-secondary" type="button" (click)="onReset()">重置</button>
  </form>
  <div class="stat-cards">
    <div class="stat-card blue">
      <div class="stat-value">{{ stats.totalOrderCount }}</div>
      <div class="stat-label">出入库单数量</div>
    </div>
    <div class="stat-card blue">
      <div class="stat-value">{{ stats.inOrderCount }}</div>
      <div class="stat-label">入库单数量</div>
    </div>
    <div class="stat-card blue">
      <div class="stat-value">{{ stats.outOrderCount }}</div>
      <div class="stat-label">出库单数量</div>
    </div>
    <div class="stat-card green">
      <div class="stat-value">{{ stats.inCount }}</div>
      <div class="stat-label">入库数量</div>
    </div>
    <div class="stat-card green">
      <div class="stat-value">{{ stats.inAmount | number:'1.2-2' }}</div>
      <div class="stat-label">入库金额</div>
    </div>
    <div class="stat-card orange">
      <div class="stat-value">{{ stats.outCount }}</div>
      <div class="stat-label">出库数量</div>
    </div>
    <div class="stat-card orange">
      <div class="stat-value">{{ stats.outAmount | number:'1.2-2' }}</div>
      <div class="stat-label">出库金额</div>
    </div>
  </div>
  <table class="table table-bordered table-striped" style="width: 100%; text-align: center;">
    <thead style="background: #f5f5f5; font-weight: bold;">
      <tr>
        <th>货品ID</th>
        <th>采购单号</th>
        <th>采购编码</th>
        <th>司机</th>
        <th>车牌号</th>
        <th>状态</th>
        <th>运输公司</th>
        <th>供应商</th>
        <th>入库时间</th>
        <th>客户订单号</th>
        <th>运输单号</th>
        <th>运输商</th>
        <th>备注</th>
        <th>附件</th>
        <th>仓库区域</th>
        <th>other单号</th>
        <th>other货主编码</th>
        <th>other车牌号</th>
        <th>other司机</th>
        <th>other司机电话</th>
        <th>other状态</th>
        <th>other预计到达</th>
        <th>other客户订单号</th>
        <th>other运输单号</th>
        <th>other运输商</th>
        <th>other备注</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of pagedList">
        <td>{{ item.customergoodsId }}</td>
        <td>{{ item.customergoodsPurchaseOrderNo }}</td>
        <td>{{ item.customergoodsSupplierCode }}</td>
        <td>{{ item.customergoodsDriverName }}</td>
        <td>{{ item.customergoodsCarNo }}</td>
        <td>{{ item.customergoodsStatus }}</td>
        <td>{{ item.customergoodsTransportCompany }}</td>
        <td>{{ item.customergoodsSupplier }}</td>
        <td>{{ item.customergoodsStockTime }}</td>
        <td>{{ item.customergoodsCustomerOrderNo }}</td>
        <td>{{ item.customergoodsTransportNo }}</td>
        <td>{{ item.customergoodsShipper }}</td>
        <td>{{ item.customergoodsRemarks }}</td>
        <td>{{ item.customergoodsAttachmentPath }}</td>
        <td>{{ item.customergoodsReservedWarehouseArea }}</td>
        <td>{{ item.otherwarehousingOrderNo }}</td>
        <td>{{ item.otherwarehousingOwnerCode }}</td>
        <td>{{ item.otherwarehousingCarNo }}</td>
        <td>{{ item.otherwarehousingDriverName }}</td>
        <td>{{ item.otherwarehousingDriverPhone }}</td>
        <td>{{ item.otherwarehousingStatus }}</td>
        <td>{{ item.otherwarehousingEstimatedArrivalTime }}</td>
        <td>{{ item.otherwarehousingCustomerOrderNo }}</td>
        <td>{{ item.otherwarehousingTransportNo }}</td>
        <td>{{ item.otherwarehousingTransportCompany }}</td>
        <td>{{ item.otherwarehousingRemarks }}</td>
      </tr>
    </tbody>
  </table>
  <div *ngIf="!loading && pagedList.length === 0" class="no-data">暂无数据</div>
  <div class="pagination-container" style="margin-top: 16px; text-align: center;">
    <span>当前显示 {{(pageIndex-1)*pageSize+1}} - {{(pageIndex-1)*pageSize+pagedList.length}} 条，总计 {{mergedWarehouseList.length}} 条</span>
    <select [(ngModel)]="pageSize" (change)="onPageSizeChange($event)" style="margin: 0 8px;">
      <option *ngFor="let size of [10,20,50]" [value]="size">{{size}}</option>
    </select>
    <button (click)="prevPage()" [disabled]="pageIndex===1">上一页</button>
    <span>第 {{pageIndex}} 页</span>
    <button (click)="nextPage()" [disabled]="pageIndex*pageSize>=mergedWarehouseList.length">下一页</button>
  </div>
</div>
